<template>
  <div id="quality-service">
    <div class="nac-background">
    </div>
    <div class="wrapper">
      <div v-for="(item,index) in items"
           :v-key="index"
            class="item">
        <quality-service-item :item="item"/>
      </div>
    </div>
  </div>
</template>

<script>
  import QualityServiceItem from "./childCpn/QualityServiceItem";
  export default {
    name: "QualityServiceShow",
    components:{
      QualityServiceItem
    },
    data(){
      return{
        items:[
          {
            icon:'el-icon-collection',
            background:'#5E8EA5',
            title:'企业服务',
            content:"根据客户需求预约最佳律师，与律师面对面交谈，操作简单，价格优惠",
            text:"公司注册",
            path:'service/companyService/companyBuild'
          },
          {
            icon:'el-icon-document',
            background:'#D55B34',
            title:'在线合同',
            content:"快速委托案件，为您提供专业律师，操作简单，价格优惠",
            text:"我要合同",
            path:'service/legalDocument/download'
          },
          {
            icon:'el-icon-edit',
            background:'#DDA419',
            title:'合同定制',
            content:"只需上传法律文书/合同，专业律师审核，操作简单，价格优惠",
            text:"我要定制",
            path:'/service/legalDocument/customMade'
          },
          {
            icon:'el-icon-copy-document',
            background:'#76AF44',
            title:'文书审核',
            content:"选择需要评估的风险项，智能系统诊断，操作简单，价格优惠",
            text:"我要审核",
            path: 'service/legalDocument/verify'
          },
          {
            icon:'el-icon-thumb',
            background:'#4D985D',
            title:'法律求助',
            content:"根据客户需求预约最佳律师，与律师面对面交谈，操作简单，价格优惠",
            text:"我要咨询",
            path: 'service/lawHelp'
          },
        ]
      }
    }
  }
</script>

<style scoped>
  #quality-service{
    width: 100%;
    height: 350px;
    border-bottom: 1px solid #2c3e50;
  }
  .nac-background{
    height: 80px;
    margin: 0 auto;
    background: url("../../assets/images/服务背景图.png") repeat-x;
  }
  .wrapper{
    display: flex;
    justify-content: center;
  }

</style>